<template>
<div>
    <div class="bills-charts">
        <div class="chart-group">
            <div id="monthBill"></div>
            <div id="yearBill"></div>
        </div>
        <div class="toolbar">
            <div class="details">
                <div>
                    <el-select v-model="year" @change="load()" size="small">
                        <el-option label="2021年" :value="2021"/>
                        <el-option label="2020年" :value="2020"/>
                        <el-option label="2019年" :value="2019"/>
                        <el-option label="2018年" :value="2018"/>
                        <el-option label="2017年" :value="2017"/>
                        <el-option label="2016年" :value="2016"/>
                        <el-option label="2015年" :value="2015"/>
                        <el-option label="2014年" :value="2014"/>
                        <el-option label="2013年" :value="2013"/>
                    </el-select>
                </div>
                <div>
                    <el-select v-model="month" @change="load()" size="small">
                        <el-option v-for="i in 12" :key="i" :label="i + '月'" :value="i" />
                    </el-select>
                </div>
                <div>
                    <p>月总支出： <span style="color: skyblue;">{{monthAmount / 100}}</span></p>
                </div>
                <div>
                    <p>当月主要支出</p>
                    <div>
                        <el-table :data="monthBillsRank" border style="width: 100%">
                            <el-table-column prop="product_name" label="商品名称" align="left"></el-table-column>
                            <el-table-column label="金额" width="100" align="center">
                                <template slot-scope="scope">
                                    <span>{{scope.row.amount_money / 100}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

                <div>
                    <p>当年主要支出</p>
                    <div>
                        <el-table :data="yearBillsRank" border style="width: 100%">
                            <el-table-column prop="product_name" label="商品名称" align="left"></el-table-column>
                            <el-table-column label="金额" width="100" align="center">
                                <template slot-scope="scope">
                                    <span>{{scope.row.amount_money / 100}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <el-dialog title="当日支出" :visible.sync="daylyDetails" width="650px">
        <el-table :data="daylyBills" border style="width: 100%">
            <!-- <el-table-column type="index" label="#" width="50" align="center"></el-table-column> -->
            <el-table-column prop="product_name" label="商品名称" align="left"></el-table-column>
            <el-table-column label="金额" width="100" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.amount_money / 100}}</span>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</div>

</template>

<script>
import {axget,axpost} from '@/components/api/index'
export default {
    data(){
        return {
            monthBill: null,
            monthAmount: 0,
            month: new Date().getMonth() + 1,
            year: new Date().getFullYear(),

            monthBillChart: null,
            daylyBills: null,
            daylyDetails: false,

            yearBill: null,
            yearAmount: 0,
            yearBillChart: null,

            yearBillsRank: null,
            monthBillsRank: null
        }
    },
    created(){
        this.load()
    },
    mounted()
    {
        // this.load()
    },
    methods:{
        load(){
            this.onLoadMonthBill()
            this.onLoadYearBill()
            this.getPaymentRank()
        },
        onLoadMonthBill(){
            let that = this
            axpost('/bills/getMonthBills',{year: that.year,month: that.month}).then(res=>{
                if(res){
                    // console.log(res)
                    that.monthBill = res.list
                    that.monthAmount = res.amount
                    that.monthBillChart = that.$echarts.init(document.getElementById('monthBill'))

                    that.monthBillChart.setOption({
                        // color: ['#eeeeee', '#006699', '#4cabce', '#e5323e'],
                        title: {
                            text: '每日支出'
                        },
                        tooltip: {},
                        xAxis: {
                            data: res.chartsData.date
                        },
                        yAxis: {},
                        series: [{
                            name: '金额（元）',
                            type: 'line',
                            data: res.chartsData.dayStatistics,
                            label: {
                                normal: {
                                    // show: true,
                                }
                            },
                            itemStyle:{
                                color: '#00BFFF'
                            }
                        }]
                    })

                    that.monthBillChart.on('click',function(params){
                        // console.log(params.dataIndex)
                        that.daylyBills = that.monthBill[params.dataIndex].bills
                        that.daylyDetails = true
                    })
                }
            })
        },
        onLoadYearBill(){
            let that = this
            axpost('/bills/getYearBills',{year: that.year,month: that.month}).then(res=>{
                if(res){
                    // console.log(res)
                    that.yearBill = res.list
                    that.yearAmount = res.amount
                    that.yearBillChart = that.$echarts.init(document.getElementById('yearBill'))

                    that.yearBillChart.setOption({
                        // color: ['#eeeeee', '#006699', '#4cabce', '#e5323e'],
                        title: {
                            text: '每月支出'
                        },
                        tooltip: {},
                        xAxis: {
                            data: res.chartsData.date
                        },
                        yAxis: {},
                        series: [{
                            name: '金额（元）',
                            type: 'line',
                            data: res.chartsData.monthStatistics,
                            label: {
                                normal: {
                                    // show: true,
                                }
                            },
                            itemStyle:{
                                color: '#00BFFF'
                            }
                        }]
                    })
                }
            })
        },
        getPaymentRank(){
            let that = this
            axpost('/bills/getPaymentRank',{year: that.year,month: that.month}).then(res=>{
                if(res){
                    that.yearBillsRank = res.year
                    that.monthBillsRank = res.month
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.bills-charts {
    width: 100%;
    display: flex;
    .el-dialog__wrapper {
        z-index: 9999999 !important;
    }
    .el-dialog{
        height: 500px !important;
    }
    .chart-group {
        // height: 350px;
        width: 57%;
        margin: 0 1.5%;
        #monthBill, #yearBill {
            width: 100%;
            height: 400px;
            >div{
                margin: auto;
            }
        }
    }
    .toolbar {
        width: 40%;
        height: 350px;
        // overflow-y: scroll;
        .details {
            >div{
                margin-bottom: 15px;
            }
        }
    }
}
</style>